<template>
	<view class="container">
		<!-- 自定义状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部卡片区域 -->
		<view class="header-card">
			<view class="light-spot"></view>
			<view class="light-spot"></view>
			<view class="decoration dot1"></view>
			<view class="decoration dot2"></view>
			<view class="decoration dot3"></view>
			
			<view class="title">无息贷款</view>
			<view class="header-content">
				<view class="left-section">
					<view class="welcome">
						<text class="greeting">您好，</text>
						<text class="message">欢迎使用</text>
					</view>
					<view class="amount-section">
						<view class="label-wrapper">
							<text class="label">可借额度</text>
							<text class="unit">(元)</text>
						</view>
						<view class="amount">{{ availableAmount }}</view>
					</view>
				</view>
				<image 
					class="header-icon" 
					:src="request.baseURL + 'media/default/额度.png'"
					mode="aspectFit"
				></image>
			</view>
		</view>
		
		<!-- 快捷操作区 -->
		<view class="quick-actions">
			<view class="action-item" @click="navigateTo('/pages/loan/apply')">
				<image :src="request.baseURL + 'media/default/贷款总额.png'" mode="aspectFit"></image>
				<text>申请借款</text>
			</view>
			<view class="action-item" @click="navigateTo('/pages/loan/repay')">
				<image :src="request.baseURL + 'media/default/银行卡还款.png'" mode="aspectFit"></image>
				<text>我要还款</text>
			</view>
			<view class="action-item" @click="navigateTo('/pages/loan/records')">
				<image :src="request.baseURL + 'media/default/记录.png'" mode="aspectFit"></image>
				<text>借款记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import request from "@/common/request.js"
import { STORAGE_KEY, updateStorageField } from '../../common/config';

// 模拟数据
const maxAmount = ref(50000)

// 计算已使用额度和使用率
const usedAmount = computed(() => {
	get_loan_default_amount()
	const records = uni.getStorageSync('loanRecords') || '[]'
	const recordsArray = JSON.parse(records)
	return recordsArray
		.filter(record => record.type === '借款' && 
			(record.status === '待还款' || record.status === '待审核'))
		.reduce((sum, record) => sum + Number(record.amount), 0)
})

const usageRate = computed(() => {
	return Math.min(Math.round((usedAmount.value / maxAmount.value) * 100), 100)
})

// 可用额度
const availableAmount = computed(() => {
	// 从本地存储加载用户信息
	const storageuserinfo = uni.getStorageSync(STORAGE_KEY.USER_INFO)
	if (storageuserinfo) {
		const allRecords = JSON.parse(storageuserinfo)
		return maxAmount.value
	}
	return maxAmount.value
})

// 页面跳转
const navigateTo = (url) => {
	uni.navigateTo({ url })
}

const get_loan_default_amount = () => {
	
	// 从本地存储加载用户信息
	const storageuserinfo = uni.getStorageSync(STORAGE_KEY.USER_INFO)
	if (storageuserinfo) {
		const allRecords = JSON.parse(storageuserinfo)
		maxAmount.value = allRecords.loan_default_amount
	}
	get_server_loan_default_amount()
}

// 从服务器获取我的额度
const get_server_loan_default_amount = () => {
	request.get("api/user/get_user_quota/").then(res => {
		updateStorageField(STORAGE_KEY.USER_INFO, "loan_default_amount", res.data.loan_default_amount)
	})
}

onMounted(() => {
	get_loan_default_amount()
})

// 获取状态栏高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 0 20rpx 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.status-bar {
	background-color: #4A90E2;
}

.header-card {
	background-color: #4A90E2;
	background: linear-gradient(135deg,
		#1976D2 0%,
		#2196F3 50%,
		#1976D2 100%
	);
	background-size: 200% 200%;
	animation: gradientMove 15s ease infinite;
	color: #ffffff;
	border-radius: 0 0 40rpx 40rpx;
	padding: 60rpx 40rpx 50rpx;
	margin: 0 -20rpx 30rpx;
	box-shadow: 
		0 15rpx 30rpx rgba(25, 118, 210, 0.3),
		0 4rpx 8rpx rgba(25, 118, 210, 0.2);
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120rpx;
		background: url('data:image/svg+xml,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v46.29c47.79 22.2 103.59 32.17 158 28 70.36-5.37 136.33-33.31 206.8-37.5 73.84-4.36 147.54 16.88 218.2 35.26 69.27 18 138.3 24.88 209.4 13.08 36.15-6 69.85-17.84 104.45-29.34C989.49 25 1113-14.29 1200 52.47V0z" fill="%23ffffff" fill-opacity=".1"/></svg>') no-repeat;
		background-size: cover;
		opacity: 0.8;
		animation: wave 15s linear infinite;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 60%;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.2) 0%,
			rgba(255, 255, 255, 0.1) 30%,
			transparent 100%
		);
		filter: blur(10px);
		z-index: 1;
	}
	
	.decoration {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(135deg, 
			rgba(255, 255, 255, 0.25), 
			rgba(255, 255, 255, 0.15),
			rgba(255, 255, 255, 0.05)
		);
		backdrop-filter: blur(4px);
		pointer-events: none;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		
		&.dot1 {
			width: 120rpx;
			height: 120rpx;
			top: -60rpx;
			right: 20%;
			animation: float 6s ease-in-out infinite;
			box-shadow: 
				inset 0 0 20rpx rgba(255, 255, 255, 0.2),
				0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		}
		
		&.dot2 {
			width: 80rpx;
			height: 80rpx;
			bottom: 40rpx;
			left: 10%;
			animation: float 4s ease-in-out infinite;
			box-shadow: 
				inset 0 0 15rpx rgba(255, 255, 255, 0.2),
				0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		}
		
		&.dot3 {
			width: 60rpx;
			height: 60rpx;
			top: 30%;
			right: 5%;
			animation: float 5s ease-in-out infinite;
			animation-delay: -2s;
			box-shadow: 
				inset 0 0 10rpx rgba(255, 255, 255, 0.2),
				0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
		position: relative;
		z-index: 1;
		letter-spacing: 2rpx;
		color: #fff;
		display: flex;
		align-items: center;
		gap: 10rpx;
		
		&::before {
			content: '';
			width: 8rpx;
			height: 32rpx;
			background: #fff;
			border-radius: 4rpx;
			margin-right: 12rpx;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 1;
		
		.left-section {
			flex: 1;
		}
		
		.header-icon {
			width: 120rpx;
			height: 120rpx;
			margin-left: 30rpx;
			filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.15));
			animation: float 3s ease-in-out infinite;
			transform-origin: center center;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 60%;
				height: 10rpx;
				background: rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				filter: blur(4rpx);
				animation: shadow 3s ease-in-out infinite;
			}
		}
	}
	
	.welcome {
		font-size: 32rpx;
		margin-bottom: 40rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 12rpx;
		
		.greeting {
			font-weight: bold;
			color: #fff;
			position: relative;
			padding-bottom: 4rpx;
			
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.3);
			}
		}
		
		.message {
			color: rgba(255, 255, 255, 0.9);
		}
	}
	
	.amount-section {
		.label-wrapper {
			display: inline-flex;
			align-items: center;
			gap: 8rpx;
			background: rgba(255, 255, 255, 0.15);
			padding: 8rpx 20rpx;
			border-radius: 30rpx;
			backdrop-filter: blur(10px);
			border: 1rpx solid rgba(255, 255, 255, 0.2);
			position: relative;
			overflow: hidden;
			
			&::before {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: linear-gradient(
					45deg,
					transparent,
					rgba(255, 255, 255, 0.1),
					transparent
				);
				transform: rotate(45deg);
				animation: shine 3s ease-in-out infinite;
			}
			
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
			}
			
			.unit {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
		
		.amount {
			font-size: 80rpx;
			font-weight: bold;
			margin-top: 20rpx;
			color: #fff;
			text-shadow: 
				0 4rpx 8rpx rgba(0, 0, 0, 0.2),
				0 0 20rpx rgba(255, 255, 255, 0.3);
			font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, sans-serif;
			position: relative;
			display: inline-block;
			
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -8rpx;
				width: 100%;
				height: 4rpx;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(255, 255, 255, 0.5),
					transparent
				);
				border-radius: 2rpx;
				animation: shimmerLine 2s ease-in-out infinite;
			}
		}
	}
}

@keyframes shine {
	0% {
		transform: rotate(45deg) translateX(-100%);
	}
	100% {
		transform: rotate(45deg) translateX(100%);
	}
}

.quick-actions {
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 0;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	transform: translateY(-20rpx);
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
		
		&:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 60%;
			background: linear-gradient(to bottom, transparent, #f0f0f0, transparent);
		}
		
		image {
			width: 70rpx;
			height: 70rpx;
			margin-bottom: 10rpx;
			padding: 20rpx;
			border-radius: 25rpx;
			background: linear-gradient(135deg, #f5f7fa, #e3f2fd);
			transition: all 0.3s ease;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}
		
		text {
			font-size: 28rpx;
			color: #333;
			transition: all 0.3s ease;
		}
		
		&:active {
			image {
				transform: scale(0.92);
				background: linear-gradient(135deg, #e3f2fd, #f5f7fa);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
			}
			text {
				color: #4A90E2;
			}
		}
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
}

@keyframes shadow {
	0%, 100% {
		transform: translateX(-50%) scale(1);
		opacity: 0.3;
	}
	50% {
		transform: translateX(-50%) scale(0.8);
		opacity: 0.2;
	}
}

@keyframes shine-sweep {
	0% {
		transform: rotate(25deg) translateX(-100%);
	}
	100% {
		transform: rotate(25deg) translateX(100%);
	}
}

@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes lineMove {
	0%, 100% {
		transform: scaleX(0);
		transform-origin: right;
	}
	50% {
		transform: scaleX(1);
		transform-origin: right;
	}
	51% {
		transform: scaleX(1);
		transform-origin: left;
	}
	100% {
		transform: scaleX(0);
		transform-origin: left;
	}
}

@keyframes shimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

@keyframes shimmerGold {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

@keyframes wave {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 1200px 0;
	}
}

@keyframes moveSpot {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(100rpx, 100rpx);
	}
	50% {
		transform: translate(0, 200rpx);
	}
	75% {
		transform: translate(-100rpx, 100rpx);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes shimmerLine {
	0%, 100% {
		opacity: 0.3;
		transform: scaleX(0.8);
	}
	50% {
		opacity: 0.6;
		transform: scaleX(1);
	}
}
</style>
